<template>
  <div>
    <el-table border :data="refunds">
      <el-table-column label="退货订单号" prop="returnNumber"></el-table-column>
      <el-table-column label="订单编号" prop="detail.orders.pid"></el-table-column>
      <el-table-column label="货物状态" >
        <template slot-scope="scope">
          <el-tag  v-if="scope.row.shopState==0" type="danger"> 未收到货 </el-tag>
          <el-tag  v-if="scope.row.shopState==1" > 已收到货 </el-tag>
          <el-link type="primary" @click="showPicture(scope.row.id)" >查看图片</el-link>
        </template>
      </el-table-column>
      <el-table-column label="退款金额(元)" prop="money"></el-table-column>
      <el-table-column label="操作" >
        <template  slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.isAudit==1">待退货</el-tag>
          <el-link type="primary" @click="openReturn(scope.row.id)" >查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-row class="mytop" v-if="refunds.length>0">
        <el-col :span="4">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageno"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="50%">
        <return-detail ref="returnDetail"></return-detail>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisible2"
        :before-close="handleClose2"
        width="50%">
        <return-picture ref="returnPicture"></return-picture>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import ReturnPicture from "./ReturnPicture";
  import ReturnDetail from "./ReturnDetail";
  export default {
    name: "ReturnView",
    data() {
      return {
        refunds: [],
        refund:{},
        pageno: 1,
        pagesize: 5,
        total: 1,
        dialogVisible:false,
        dialogVisible2:false,
      }
    },
    methods: {
      getData() {
        var params = {};
        params["pageno"] = this.pageno;
        params["pagesize"] = this.pagesize;
        Object.keys(this.refund).forEach(item => {
          params[item] = this.refund[item];
        });
        this.$axios
        .get("queryAllReturn.action",{params: params})
        .then(res=>{
          this.refunds=res.data.records;
          this.total = res.data.total;
        })
        .catch(err=>{this.$message.error(err)})
      },
      showPicture(id){
        this.dialogVisible2=true;
        this.$nextTick(item => {
          this.$refs.returnPicture.getData(id);
        });
      },
      handleClose2(){
        this.$refs.returnPicture.cancel();
      },
      openReturn(id){
        //打开退货详情表
        this.dialogVisible=true;
        this.$nextTick(item => {
          this.$refs.returnDetail.getData(id);
        });
      },
      handleClose() {
        this.$nextTick(item => {
          this.$refs.returnDetail.cancel();
        })
      },
      handleSizeChange(val) {
        //每页范围
        this.pagesize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        //当前页
        this.pageno = val;
        this.getData();
      },
    },
    components:{
      ReturnDetail,ReturnPicture
    },
    created() {
      this.getData();
    }
  }
</script>

<style scoped>

</style>
